<template>
    <div class="container">
        <div class="mask"></div>
        <div class="wrap" ref="wrap">
            <div class="content"
                 element-loading-text="价格信息加载中..."
                 ref="content"
                 v-loading="loading">
                
                <div class="content-mask"></div>
                <div class="top">
                    <i class="icon el-icon-goods"></i><span>易找标会员</span>
                    <i @click="close" class="el-icon-close" title="关闭"></i>
                </div>
                <el-scrollbar :native="false" style="height: 100%;">
                    
                    <div class="form-wrap">
                        <div class="item-wrap subscribe-duration">
                            <div class="name">
                                {{ subscriberStatus !== 1 ? '续费' : '订阅' }}时长：
                            </div>
                            <div class="condition">
                                <div class="slider-wrap">
                                    <ul class="slider-item-list">
                                        <li class=""
                                            v-for="(item,index) in discountList"
                                            :key="item.id"
                                            :class="{active:index<=sliderValueIndex}"
                                            :style="{width:600/(discountList.length-1)+'px'}"
                                        >
                                            <div class="slider-stop" :class="{active:index<=sliderValueIndex}"
                                                 @click="changeSliderValue(index)">
                                                <div class="sign-text" :class="{active:index==sliderValueIndex}">
                                                    {{ item.monthCount + '个月' }}
                                                </div>
                                                <div class="discount-text" v-if="item.discount<100"
                                                     :class="{active:index==sliderValueIndex}">
                                                    {{ item.discount / 10 + '折' }}
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="item-wrap subscribe-due-time" v-if="dueTime">
                            <div class="name">
                                到期时间：
                            </div>
                            <div class="condition">
                                <span>{{ dueTime || '-' }}</span>
                            </div>
                        </div>
                        <div class="item-wrap subscribe-due-time" v-if="dueTime">
                            <div class="name">
                                续费后到期：
                            </div>
                            <div class="condition">
                                <span>{{ renewDueTime }}</span>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
                <div class="bottom">
                    <div class="bottom-box">
                        <div class="calc-total-fee" v-show="computedSubscribeMoneyShow">
                            正在计算...
                        </div>
                        <div @click="renew" class="btn-subscribe" v-if="subscriberStatus===1">
                            <i class="icon icon-dingyue"></i>
                            订阅
                        </div>
                        <div @click="renew" class="btn-subscribe" v-if="subscriberStatus!==1">
                            <i class="icon icon-dingyue"></i>
                            续费
                        </div>
                        <div class="total-fee" v-show="!computedSubscribeMoneyShow">
                            ￥{{ (subscribeRealMoney / 100).toFixed(2) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        let timeList = [];
        for (let i = 0; i < 24; i++) {
            timeList.push({
                text: i + ':00',
                value: i.toString()
            })
        }
        return {
            loading: true,
            closeSubscriberSign: false,
            id: 0,
            subscriberStatus: 1,//1、未创建/添加 2、已创建/修改 3、已过期 4.续费（未过期）
            discountList: [],
            sliderValueIndex: 1,
            subscribeOriginMoney: 0.00,
            subscribeRealMoney: 0.00,
            computedSubscribeMoneyShow: false,
            dueTime: '',//订阅截止时间
            daysDue: 0,
            renewDueTime: ''
        }
    },
    
    watch: {
        sliderValueIndex() {
            this.requestCommitSubscribe();
        }
    },
    mounted() {
        this.$request.discountList().then(res => {
            console.log(res);
            if (res.status == 200) {
                this.discountList = res.data;
                this.requestCommitSubscribe();
                
                this.$request.queryMemberStatus().then(res => {
                    console.log('获取会员到期时间', res);
                    if (res.status == 200) {
                        this.loading = false;
                        if (res.data) {
                            if (!res.data.isExpire) {
                                this.subscriberStatus = 2;
                                this.dueTime = res.data.dueTime;
                                this.daysDue = res.data.daysDue;
                            } else {
                                this.subscriberStatus = 3;
                            }
                        }
                    } else {
                        this.requestError(res.status, res.message);
                    }
                }, err => {
                    console.log(err);
                    this.requestFail(err);
                });
            } else {
                this.requestError(res.status, res.message);
            }
        }, err => {
            console.log(err);
            this.requestFail(err);
        });
    },
    methods: {
        selectSectionChange(type) {
            console.log(type);
            if (parseInt(this.selectTimeSection[0]) <= parseInt(this.selectTimeSection[1])) return false;
            this.selectTimeSection.reverse();
        },
        changeSubscriberStatus(status) {
            this.subscriberStatus = status;
        },
        closeDialogBox(res) {
            if (res.close) {
                console.log('点击关闭按钮');
            } else if (res.cancel) {
                console.log('点击取消');
            } else {
                console.log('点击确定');
                this.$store.commit('changeOpenMemberShow', false);
            }
            this.closeSubscriberSign = false;
        },
        close() {
            this.$store.commit('changeOpenMemberShow', false);
        },
        changeSliderValue(index) {
            this.sliderValueIndex = index;
        },
        requestCommitSubscribe() {//计算订阅器价格
            this.computedSubscribeMoneyShow = true;
            this.$request.computeSubscribePrice({
                monthCount: this.discountList[this.sliderValueIndex].monthCount
            }).then(res => {
                console.log(res);
                if (res.status == 200) {
                    this.subscribeRealMoney = res.data.realMoney;
                    this.subscribeOriginMoney = res.data.originalMoney;
                    this.computedSubscribeMoneyShow = false;
                    this.renewDueTime = res.data.dateDue;
                    // this.requestSubmitSubscribeData = res.data;
                } else {
                    this.requestError(res.status, res.message);
                }
            }, err => {
                console.log(err);
                this.requestFail(err);
            })
            
        },
        renew() {//续费
            this.$request.renewMember({
                monthCount: this.discountList[this.sliderValueIndex].monthCount
            }).then(res => {
                if (res.status == 200) {
                    console.log('续费订阅器！');
                    this.$store.commit('changeOpenMemberShow', false);
                    this.$router.push({
                        name: 'personal-order',
                        query: {
                            orderId: res.data.orderId
                        }
                    })
                } else {
                    this.requestError(res.status, res.message);
                }
            }, err => {
                console.log(err);
                this.requestFail(err);
            });
        },
        goOrderDetail() {
        
        }
    }
}
</script>

<style scoped lang="less">
.container {
    .over-screen(fixed);
    z-index: 995;
    
    .mask {
        .over-screen(absolute, 50);
        z-index: 996;
    }
    
    .wrap {
        .size;
        .center(auto-x);
        position: absolute;
        top: 0;
        left: 0;
        .min-height(400px);
        padding: 200px 0;
        z-index: 997;
        
        .content {
            .width(811px);
            .height;
            background-color: #ffffff;
            .center(auto-x);
            .border-radius(4px);
            overflow: hidden;
            position: relative;
            
            .top {
                .size(100%, 50px);
                background-color: @main-color;
                .center(text-x);
                //.lh(50px);
                .fz(23px);
                .color(#ffffff);
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999;
                
                .el-icon-goods {
                    .size(28px);
                    vertical-align: middle;
                    margin-right: 10px;
                    line-height: 50px;
                    
                    & + span {
                        vertical-align: middle;
                    }
                }
                
                .el-icon-close {
                    .fr;
                    margin-top: 12px;
                    margin-right: 10px;
                    cursor: pointer;
                    
                    &:hover {
                        transform: scale(1.2);
                        .transition(0.5s);
                    }
                }
            }
            
            .form-wrap {
                padding: 80px 0 70px;
                
                .item-wrap {
                    .clearfix;
                    margin-top: 20px;
                    line-height: 40px;
                    
                    i.icon-plus {
                        .size(14px, 14px);
                        .bg('@{img-base-url}subscriber_icon-add.png');
                        vertical-align: middle;
                        margin-left: 10px;
                        cursor: pointer;
                        .color(@main-color);
                    }
                    
                    button.add-condition {
                        padding: 5px 10px;
                        background-color: @main-color;
                        .color(#ffffff);
                        .border-radius(2px);
                        font-family: AlibabaPuHuiTiR;
                        .fz(14px);
                        margin-left: 10px;
                    }
                    
                    .btn-keywords-item {
                        display: inline-block;
                        padding: 7px 10px;
                        border: 1px solid @main-color;
                        .border-radius(4px);
                        vertical-align: middle;
                        .color(@main-color);
                        line-height: 1;
                        .fz(14px);
                        box-sizing: border-box;
                        
                        &:nth-of-type(1) {
                            margin-left: 20px;
                        }
                        
                        & + .btn-keywords-item {
                            margin-left: 10px;
                        }
                        
                        .icon-delete-keywords {
                            .fz(10px);
                            font-weight: bold;
                            cursor: pointer;
                        }
                    }
                    
                    .name {
                        .width(105px);
                        .fl;
                        .fz(14px);
                        .color(#7D7D7D);
                        //.lh(35px);
                        text-align: right;
                        padding: 0 15px 0 5px;
                    }
                    
                    .condition {
                        .fl;
                        .max-width(680px);
                        
                        .wx-user-info {
                            .wx-header-img {
                                width: 35px;
                                height: 35px;
                                vertical-align: middle;
                                margin-right: 10px;
                            }
                            
                            .unbundling {
                                color: @main-color;
                                margin-left: 20px;
                                cursor: pointer;
                                
                            }
                        }
                        
                        .binding {
                            position: relative;
                            
                            #qrcode {
                                width: 150px;
                                height: 150px;
                                border: 1px solid #0c0c0c;
                                position: absolute;
                                bottom: 30px;
                                left: 70px;
                            }
                        }
                        
                        input {
                            padding-left: 10px;
                        }
                        
                        .custom-money {
                            display: inline-block;
                        }
                        
                        .btn-renew {
                            margin-left: 10px;
                            .color(@main-color);
                        }
                        
                        .sign-expire {
                            margin-left: 10px;
                            .color(@color-error);
                        }
                        
                        .btn-cancel-renew {
                            margin-left: 10px;
                            .color(@color-disabled);
                        }
                    }
                    
                    &.subscriber-name {
                        .condition {
                            
                            input[name=subscriber-name] {
                                .size(400px, 35px);
                                .border-radius(4px);
                                border: 1px solid #EBEBEB;
                            }
                        }
                    }
                    
                    &.keywords {
                        .condition {
                            
                            input[name=keywords] {
                                .size(150px, 35px);
                                .border-radius(4px);
                                border: 1px solid #EBEBEB;
                            }
                        }
                    }
                    
                    &.receive-method {
                        .condition {
                            margin-left: -20px;
                            
                            & > span {
                                cursor: pointer;
                                
                                .checked-item {
                                    display: inline-block;
                                    .size(11px, 11px);
                                    border: 1px solid #DBDBDB;
                                    vertical-align: middle;
                                    margin-left: 20px;
                                    
                                    &.checked {
                                        position: relative;
                                        
                                        &:after {
                                            display: inline-block;
                                            .size(11px, 9px);
                                            content: '';
                                            .bg('@{img-base-url}subscriber_icon-duigou.png', no-repeat, 2px bottom);
                                            position: absolute;
                                            left: 0;
                                            bottom: 1px;
                                        }
                                        
                                        &.disabled {
                                            background-color: #bbbbbb;
                                            
                                            &:after {
                                                display: inline-block;
                                                .size(11px, 8px);
                                                content: '';
                                                .bg('@{img-base-url}subscriber_icon-duigou-disabled.png');
                                                position: absolute;
                                                left: 0;
                                                bottom: 1px;
                                            }
                                        }
                                    }
                                }
                                
                                .label {
                                    .fz(14px);
                                    vertical-align: middle;
                                    margin-left: 3px;
                                }
                            }
                        }
                    }
                    
                    .input-style {
                        .size(260px, 35px);
                        border: 1px solid #EBEBEB;
                        .border-radius(4px);
                    }
                    
                    &.e-mail {
                        .condition {
                            .input-email {
                                .input-style;
                            }
                        }
                    }
                    
                    &.phone-number {
                        .condition {
                            .input-phone-number {
                                .input-style;
                            }
                        ;
                        }
                    }
                    
                    &.subscribe-duration {
                        margin-bottom: 70px;
                        
                        .condition {
                            @slider-wrap-width: 647px;
                            @slider-wrap-height: 12px;
                            
                            .slider-wrap {
                                display: inline-block;
                                .size(@slider-wrap-width, @slider-wrap-height);
                                background-color: #E7E7E7;
                                .border-radius(6px);
                                vertical-align: middle;
                                
                                ul.slider-item-list {
                                    .size;
                                    .clearfix;
                                    
                                    & > li {
                                        //.size(@slider-item-width);
                                        .height;
                                        .border-radius(@slider-wrap-height/2);
                                        .fl;
                                        position: relative;
                                        
                                        &:first-child {
                                            .width(47px) !important;
                                        }
                                        
                                        &.active {
                                            background-color: @main-color;
                                        }
                                        
                                        .slider-stop {
                                            @wh: 22px;
                                            .size(@wh, @wh);
                                            position: absolute;
                                            top: -(@wh - @slider-wrap-height)/2;
                                            right: -@wh/2;
                                            border: 2px solid #ffffff;
                                            .border-radius(50%);
                                            .box-shadow;
                                            .bg-linear-gradient(#dadada, #ebebeb, left);
                                            cursor: pointer;
                                            
                                            &.active {
                                                background: @main-color !important;
                                            }
                                            
                                            z-index: 998;
                                            
                                            @text-width: 50px;
                                            
                                            .sign-text {
                                                .width(@text-width);
                                                .fz(14px);
                                                .color(#7D7D7D);
                                                .center(text-x);
                                                position: absolute;
                                                top: 16px;
                                                left: 50%;
                                                margin-left: -@text-width/2;
                                                
                                                &.active {
                                                    .fz(16px);
                                                    .color(#333333);
                                                }
                                            }
                                            
                                            .discount-text {
                                                display: none;
                                                
                                                &.active {
                                                    display: block;
                                                    .width(@text-width);
                                                    .fz(16px);
                                                    .center(text-x);
                                                    font-family: PingFang;
                                                    font-weight: 500;
                                                    position: absolute;
                                                    top: 38px;
                                                    left: 50%;
                                                    margin-left: -@text-width/2;
                                                    .color(@main-color);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            .bottom {
                
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 999;
                background-color: #ffffff;
                
                .bottom-box {
                    .size(800px, 50px);
                    border-top: 1px solid #EBEBEB;
                    margin-left: 11px;
                    .clearfix;
                    .fz(18px);
                    box-sizing: content-box;
                    
                    & > div {
                        .fl;
                        .lh(50px);
                        
                        &.calc-total-fee {
                            .color(@main-color);
                            margin-left: 20px;
                        }
                        
                        &.total-fee {
                            .fr;
                            .color(@main-color);
                            margin-right: 59px;
                        }
                        
                        &.btn-subscribe {
                            .fr;
                            .size(165px);
                            background-color: @main-color;
                            .color(#FFFFFF);
                            .center(text-x);
                            cursor: pointer;
                            
                            i {
                                display: inline-block;
                                .size(15px, 17px);
                                vertical-align: middle;
                                .bg('@{img-base-url}subscriber_icon-dingyue.png');
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>